<template>
  <Layout>
    <PageHeader :title="title"></PageHeader>
    <div class="row">
      <div class="col-xl-9">
        <Stat />
        <RevenueAnalytics />
      </div>
      <div class="col-xl-3">
        <Stat2 />
      </div>
    </div>
    <div class="row">
      <div class="col-xl-12">
        <div class="card">
          <div class="card-body">
            <div class="all-products">数据接口清单</div>
            <div class="states-type">
              <span class="type-title">数据类型:</span>
              <button
                type="button"
                class="btn btn-light rounded-pill btn-sm states-type-item"
                :class="{ isActive: siteChange == item.index }"
                v-for="item in sitetype"
                :key="item.index"
                @click="allSites(item)"
              >
                {{ item.name }}
              </button>
            </div>
            <div class="states-time">
              <div>
                <span class="time-title">应用环境:</span>
                <button
                  type="button"
                  class="btn btn-light rounded-pill btn-sm states-time-item"
                  :class="{ isActive: reptileChange == item.index }"
                  v-for="item in reptiletype"
                  :key="item.index"
                  @click="reptile(item)"
                >
                  {{ item.name }}
                </button>
              </div>
            </div>
            <Transaction />
          </div>
        </div>
      </div>
    </div>
  </Layout>
</template>
<script>
import Layout from "../../layouts/main";
import PageHeader from "@/components/page-header";
import Stat from "./widget";
import Stat2 from "./widget2";
import RevenueAnalytics from "./revenue";
import Transaction from "./transaction";
export default {
  components: { Layout, PageHeader, Stat, Stat2, RevenueAnalytics, Transaction },
  data () {
    return {
      title: "接口管理",
      // 数据类型
      sitetype: [
        {
          name: "资讯数据",
          index: 1,
        },
        {
          name: " 工商数据",
          index: 2,
        },
        {
          name: "招标数据",
          index: 3,
        },
        {
          name: "招聘数据",
          index: 4,
        },
        {
          name: "微信公众号",
          index: 5,
        },
        {
          name: "短视频",
          index: 6,
        },
        {
          name: "微博数据",
          index: 7,
        },
        {
          name: "证券数据",
          index: 8,
        },
        {
          name: "政府数据",
          index: 9,
        },
        {
          name: "标准数据",
          index: 10,
        },
      ],
      siteChange: 1,

      // 应用环境
      reptiletype: [
        {
          name: "全部",
          index: 1,
        },
        {
          name: "测试环境",
          index: 2,
        },
        {
          name: "正式环境",
          index: 3,
        },
      ],
      reptileChange: 1,
    }
  },
  methods: {
    //数据类型
    allSites(item) {
      this.siteChange = item.index;
    },
    // 爬虫类型
    reptile(item) {
      this.reptileChange = item.index;
    },
  }
}
</script>
<style lang="scss" scoped>
.isActive {
  color: #fff;
  background-color: #5664d2;
}
.all-products {
  font-size: 15px;
  font-weight: bold;
}
.states-type {
  margin-top: 20px;
  .type-title {
    display: inline-block;
    color: #74788d;
    padding-right: 10px;
  }
  .states-type-item {
    font-size: 12px;
    margin: 0 10px;
    padding-left: 8px;
    padding-right: 8px;
    min-width: 70px;
    &:hover {
      cursor: pointer;
    }
  }
}
.states-time {
  margin-top: 20px;
  margin-bottom: 20px;
  .time-title {
    display: inline-block;
    color: #74788d;
    padding-right: 10px;
  }
  .states-time-item {
    font-size: 12px;
    margin: 0 10px;
    padding-left: 16px;
    padding-right: 16px;
    min-width: 70px;
    &:hover {
      cursor: pointer;
    }
  }
}
</style>
